<template>
	<div class="page">
		<div class="pass-main-body">
			<div class="login-logo">
				<img src="../assets/gezilogo.png" style="width:150px;height:150px;"/>
				<br />
				登录鸽子网，与1000万+实训中不能战斗的特种兵一起敲代码、分享快乐吧！
			</div>
				<div class="login-box module-l-static" id="login-box">
					<div class="login-switch">
						<div class="icon-1 static-1"></div>
						<div class="icon-1 quick-1"></div>
					</div>
					<div class="l-static">
						
						<div class="l-tab-covers">
							<div class="l-tab-list">密码登录</div>
						</div>
						
						<div class="static-module-covers">

								<div class="email">
									<input type="text" id="username" v-model="email" placeholder="手机号/邮箱" class="text-style ipt-default-current" />
								</div>
								<div class="password">
									<input type="password" id="password" v-model="password" placeholder="密码" maxlength="40" autocomplete="off" class="text-style ipt-default-current" />
								</div>
								<div class="login">
									<input type="button" class="btn-current-big btn-default-main loadding-btn" value="登录" @click="doLogin"/>
								</div>
								<div class="auto-login" @click="goRegister">
										<a target="_blank">注册</a>
								</div>
							</div>
						</div>
					</div>
					<div class="footer login-footer">
						<p>来自实训中并不能战斗的特种兵们，每天努力敲代码咕咕咕。</p>
						<p>联系地址：南京工业职业技术学院 </p>
					</div>
					
					</div>
				</div>
		</div>
	</div>
	
</template>

<script>
	export default{
		data(){
			return{
				email:"",
				password:""
			}
		},
		methods:{
			goRegister(){
				this.$router.push("/register")
			},
			doLogin(){
				console.log("doLogin stary");
				if(this.email.length==0){
					this.$message.error('请输入用户名');
					return;
				}
				if(this.password.length==0){
					this.$message.error('请输入密码');
					return;
				}
				//发送登录请求
				this.$http.post("/api/authenticate",{
					password:this.password,
					username:this.email,
					rememberMe:"true"
				}).then((result)=>{
					console.log("登录完成",result);
					if(result.status==200){
						localStorage.setItem("token",result.data.id_token);
						this.$http.get("/api/account",{
							headers:{
								Authorization:'Bearer '+localStorage.getItem("token")
							}
						}).then((userResult)=>{
							console.log("获取账户信息完成",userResult);
							localStorage.setItem("userInfo",JSON.stringify(userResult.data));
							this.$message.success("登录成功");
							this.$router.push("/index");
						});
						
					}else{
						this.$message.error('用户名密码错误');
					}
				}).catch((error)=>{
					this.$message.error('用户名密码错误');
				})
			}
		}
	}
</script>

<style scoped>
	.page{
		font-family: "微软雅黑";
		margin: 0;
		padding: 0;
		height: 900px;
		width: 100%;
		min-height: 100%;
		min-width: 900px;
		box-sizing: border-box;
		position: relative;
		display: block;
		background:url(../assets/350.jpg) no-repeat;
	}
	.pass-main-body{
		margin: 0;
		padding: 0;
		height: 900px;
		width: 100%;
		min-height: 100%;
		min-width: 900px;
		box-sizing: border-box;
		position: relative;
		display: block;
	}
	
	.login-logo{
		margin: 0,auto;
		color: #fff;
		font-size: 18px;
		text-align: center;
		padding: 20px 0 30px;
		display: block;
	}
	.login-switch{
		width: 52px;
		height: 52px;
		position: absolute;
		right: 10px;
		top: 10px;
		cursor: pointer;
	}
	.module-l-static .static-1{
		display: block;
	}
	.login-switch .static-1{
		background: url(../assets/wx_l.svg) no-repeat repeat;
	}
	.icon-1{
		width: 52px;
		height: 52px;
	}
	.module-l-static .quick-1{
		display: none;
	}
	.login-switch .quick-1{
		background: url(../assets/web_l.svg) no-repeat 1px 0;
	}
	.login-box{
		width: 336px;
		min-height: 400px;
		background: #ffffff;
		position: relative;
		margin: 0 auto;
		padding: 30px 32px;
		box-shadow: 0px 1px 12px 0px rgba(0,0,0,0.2);
		display: block;
	}
	.l-tab-covers{
		font-size: 16px;
		border-bottom: 1px solid #eee;
	}
	.l-tab-covers .l-tab-list{
		color: #282828;
		border-bottom: 2px solid #282828;
		font-weight: 500;
		padding-bottom: 20px;
	}
	.l-tab-covers .l-tab-list:hover, .l-tab-covers .l-tab-list.current{
		color: #999;
		display: inline-block;
		margin-right: 30px;
		border-bottom: 2px solid transparent;
		padding-bottom: 20px;
		margin-bottom: -1px;
		cursor: pointer;
	}
	.static-module-covers{
		margin: 0;
		padding: 0;
		background: #ffffff;
		position: relative;
		z-index: 2;
		margin-top: 45px;
		padding-bottom: 8px;
	}
	.pass-login-covers{
		position:relative;
	}
	.error-tips{
		position: relative;
		top: -54px;
	}
	
	.hide{
		display: none;
	}
	.error-tips .ipt-default-current{
		height: 42px;
	}
	.ipt-tips-default{
		width: 336px;
		padding: 0 20px 0 45px;
		border: 1px solid #d46f16;
		border-radius: 4px;
		background:#ffe6e5 url(../assets/error-tips.png) no-repeat 20px 12px;
		display: flex;
		align-items: center;
		box-sizing: border-box;
	}
	.ipt-tips-default,.email, .password{
		margin-bottom: 20px;
	}
	.ipt-default-current{
		width: 336px;
	}
	.text-style{
		height: 42px;
		padding-left: 20px;
		padding-right: 20px;
		color: #666;
		font-size: 14px;
		border: 1px solid #ddd;
		background: #f4f4f4;
		box-sizing: border-box;
		-webkit-border-radius: 4px;
		font-family: inherit;
		outline: none;
	}
	.login{
		margin-bottom: 20px;
	}
	.btn-current-big{
		width: 336px;
		height: 42px;
		font-size: 16px;
	}
	.btn-disabled{
		color: #bbb;
		background: #eee;
		border: 1px solid #eee;
		border-radius: 4px;
		text-align: center;
		cursor: default;
	}
	.loadding-btn{
		cursor: default;
	}
	.btn-default-main{
		color: #444;
		background: #ffe300;
		border: 1px solid #ffe300;
		border-radius: 4px;
		text-align: center;
		height: 42px;
	}
	.auto-login{
		line-height: 14px;
		float: right;
		padding-right: 20px;
	}
	.auto-login:after{
		clear: both;
	}
	.auto-login:after{
		content: "";
		display: table;
	}
	div{
		margin: 0;
		padding: 0;
		display: block;
	}
	.login-footer{
		margin-top: 32px;
		color: #fff;
	}
</style>
